<!-- 抢单记录 -->
<template>
	<loading-page v-if="showSkeleton&&!dataList.length" />
	<!-- tabs -->
	<view class="tab">
		<v-tabs v-model="data.tabIndex" :tabs="data.tabList" color="#999" fontSize="32rpx" height="100rpx" :lineScale="0.4" lineHeight="4rpx" lineColor="#E1835B" paddingItem="0 30rpx" activeColor="#000" :bold="true" :lineAnimation="data.lineAnimation" @change="changeTab"></v-tabs>
	</view>
	<!-- list -->
	<view class="list">
		<template v-for="(item,index) in dataList" :key="index">
			<navigator class="item" :url="`/subpages/task/detail/detail?id=${item.taskid}&mid=${item.publisher_mid}`" :hover-stop-propagation="true">
				<view class="hd">
					<text class="state">{{orderStatus(item.takeorder_info.check_status)}}</text>
					<text class="time">{{item.takeorder_info.add_time}} 创建</text>
				</view>
				<view class="bd">
					<text class="title">{{item.title}}</text>
				</view>
				<view class="ft">
					<view class="price">
						<text class="unit">¥{{item.price}}</text>
					</view>
					<view class="btns">
						<button type="default" class="btn btn-preview" hover-class="btnClickStyle" @click.stop="orderInfos(item.takeorder_info)">申请资料</button>
					</view>
				</view>
				<view class="in-winner">
					<image class="img" src="/static/pick.png" mode="aspectFit" v-if="item.in_winner==1"></image>
				</view>
			</navigator>
		</template>
	</view>
	<!-- 空数据 -->
	<empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
	<!-- 订单详情 -->
	<popup-order-detail ref="popupOrderDetailRef" />
</template>
<script setup>
	import { ref, reactive, watch, defineComponent, computed } from 'vue';
	import { onLoad, onReady, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import useGetList from '@/common/hooks/useGetList.js';
	import popupOrderDetail from './components/popup-order-detail.vue';
	defineComponent({
		popupOrderDetail
	})
	onLoad(() => {
		init();
	});
	onReady(() => {
		data.lineAnimation = true;
	});
	onReachBottom(() => {
		reachBottom();
	});
	onPullDownRefresh(() => {
		pullDownRefresh();
	});
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom, pullDownRefresh } = useGetList();
	const popupOrderDetailRef = ref(null);
	const data = reactive({
		tabIndex: 0,
		tabList: ['全部', '审核中', '审核通过', '审核失败'],
		lineAnimation: false,
		searchParams: {
			check_status: 'all',
			order: 'add_time',
			is_winner: 'all'
		}
	});
	// 初始化数据
	function init(showLoading = false) {
		getDataList({
			url: '/crm/task/myTakeorders',
			params: {
				...data.searchParams
			},
			showLoading: false
		});
	}
	// 处理任务状态
	function orderStatus(v) {
		switch (+v) {
			case 1:
				return '审核中';
			case 2:
				return '审核通过';
			case 3:
				return '审核失败';
		}
	}
	// 接单信息
	function orderInfos(item) {
		popupOrderDetailRef.value.open(item);
	}
	// tab切换
	function changeTab(index) {
		data.searchParams.check_status = index == 0 ? 'all' : index;
		init(true);
	}
</script>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.tab {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99999;
	}
	.list {
		padding: 0 28rpx;
	}
	.item {
		position: relative;
		width: 694rpx;
		margin: 28rpx 0 0;
		padding: 0 28rpx 30rpx;
		border-radius: 18rpx;
		background-color: #fff;
		.hd {
			@include flex;
			padding: 24rpx 0;
			border-bottom: 1px solid #ddd;
			.state {
				font-size: 30rpx;
				color: #444;
			}
			.time {
				font-size: 24rpx;
				color: #999;
			}
		}
		.bd {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin: 20rpx 0;
			line-height: 54rpx;
			word-break: break-all;
			font-size: 34rpx;
			color: #000;
		}
		.ft {
			@include flex;
			.price {
				font-size: 34rpx;
				color: #ff0000;
			}
			.btns {
				@include flex;
				margin: 0 -10rpx;
				.btn {
					height: 60rpx;
					line-height: 56rpx;
					margin: 0 10rpx;
					border: 1px solid $color;
					border-radius: 30rpx;
					background: #fff;
					font-size: 28rpx;
					color: $color;
					&-down {
						border-color: #aaa;
						color: #aaa;
					}
				}
			}
		}
		.in-winner {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			.img {
				width: 158rpx;
			}
		}
	}
</style>
